import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/route/xfg_nav.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/xfg_text.dart';

import 'integral_goods_view_model.dart';

/// @description: 积分商品
/// @author tangzhentao
/// @created at 13:37 2024/11/30

class IntegralGoodsPage extends StatelessWidget {
  /// 积分商品id
  final int goodsId;

  const IntegralGoodsPage({super.key, required this.goodsId});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<IntegralGoodsViewmodel>(
        model: IntegralGoodsViewmodel(goodsId),
        onInit: (data) => data.loadData(),
        builder: (ctx, integral) {
          final goods = integral.detail;
          final imageUrls = goods?.imageUrls?.split(',')?? ['emptyUrl'];
          final limit = goods?.limit?? 0;
          return Stack(
            children: [
              Column(
                children: [
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          SizedBox(
                            width: XfgSize().screenWidth,
                            height: XfgSize().screenWidth,
                            child: Stack(
                              children: [
                                CarouselSlider.builder(
                                  options: CarouselOptions(
                                    height: double.infinity, aspectRatio: 1, viewportFraction: 1, autoPlay: true,
                                    onPageChanged: (index, _) => integral.carouselIndex = index,
                                  ),
                                  itemCount: imageUrls.length,
                                  itemBuilder: (_, index, __) => HttpImage(imageUrls[index], size: Size.infinite),
                                ),
                                Positioned(
                                  right: XfgSize().size10,
                                  bottom: XfgSize().size15,
                                  child: Container(
                                    width: XfgSize().size40,
                                    height: XfgSize().size18,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(color: XfgColor.text1D.withValues(alpha: 0.6), borderRadius: BorderRadius.circular(XfgSize().size18)),
                                    child: XfgText('${ctx.select<IntegralGoodsViewmodel, int>((k) => k.carouselIndex) + 1}/${imageUrls.length}', fontSize: XfgSize().text14, color: XfgColor.white),
                                  ),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.all(XfgSize().size10),
                            alignment: Alignment.centerLeft,
                            child: XfgText(goods?.name?? '', fontSize: XfgSize().text16, color: XfgColor.text1, bold: FontWeight.w500),
                          ),
                          Container(
                            margin: EdgeInsets.all(XfgSize().size10),
                            child: Row(
                              children: [
                                XfgText(goods?.pointsPrice?.toString()?? '0', fontSize: XfgSize().text20, color: XfgColor.theme, bold: FontWeight.w500),
                                XfgText('积分', fontSize: XfgSize().text16, color: XfgColor.theme),
                                SizedBox(width: XfgSize().size16),
                                XfgText(goods?.marketPrice?.toString()?? '0', fontSize: XfgSize().text18, color: XfgColor.text3, decoration: TextDecoration.lineThrough)
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.all(XfgSize().size10),
                            decoration: BoxDecoration(color: XfgColor.white, borderRadius: BorderRadius.circular(XfgSize().size6)),
                            child: Column(
                              children: [
                                _itemWidget1('库存', '${goods?.stock?? 0}件', bottom: true),
                                _itemWidget1('配送', '顺丰到付')
                              ],
                            ),
                          ),
                          Builder(builder: (ctx) {
                            final number = ctx.select<IntegralGoodsViewmodel, int>((value) => value.number);
                            return Container(
                              margin: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size10, XfgSize().size10, XfgSize().size22),
                              decoration: BoxDecoration(color: XfgColor.white, borderRadius: BorderRadius.circular(XfgSize().size6)),
                              child: Column(
                                children: [
                                  Container(
                                    height: XfgSize().size49 + XfgSize().size0_5,
                                    padding: EdgeInsets.symmetric(horizontal: XfgSize().size12),
                                    decoration: BoxDecoration(border: Border(bottom: BorderSide(width: XfgSize().size0_5, color: XfgColor.colorE))),
                                    child: Row(
                                      children: [
                                        XfgText('数量', fontSize: XfgSize().text16, color: XfgColor.text1),
                                        const Spacer(),
                                        XfgText(limit > 0 ? '限购$limit件':'不限购', fontSize: XfgSize().text14, color: XfgColor.theme),
                                        SizedBox(width: XfgSize().size10),
                                        IconButton(
                                          onPressed: number > 1 ? () => integral.number--:null,
                                          icon: Icon(CupertinoIcons.minus, size: XfgSize().size16, color: XfgColor.text3),
                                        ),
                                        Container(
                                          height: XfgSize().size22,
                                          width: XfgSize().size34,
                                          color: XfgColor.colorE,
                                          alignment: Alignment.center,
                                          child: XfgText(number.toString(),
                                              fontSize: XfgSize().text16, color: XfgColor.text2),
                                        ),
                                        IconButton(
                                          onPressed: (limit == 0 && number < (goods?.stock?? 0)) || number < limit ? () => integral.number++:null,
                                          icon: Icon(CupertinoIcons.plus, size: XfgSize().size16, color: XfgColor.text1),
                                        )
                                      ],
                                    ),
                                  ),
                                  Container(
                                    height: XfgSize().size38,
                                    padding: EdgeInsets.symmetric(horizontal: XfgSize().size12),
                                    child: Row(
                                      children: [
                                        XfgText('支付方式', fontSize: XfgSize().text16, color: XfgColor.text1),
                                        const Spacer(),
                                        XfgText('${(goods?.pointsPrice?.toInt()?? 0) * number}积分+¥${((goods?.price?? 0.00) * number).toStringAsFixed(2)}', fontSize: XfgSize().text14, color: XfgColor.theme),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            );
                          }),
                        ],
                      ),
                    ),
                  ),
                  /// 信息
                  Visibility(
                    visible: ctx.select<IntegralGoodsViewmodel, bool>((k) => k.insufficient),
                    child: Container(
                      decoration: const BoxDecoration(gradient: XfgColor.goodsDetailInfoGradient),
                      height: XfgSize().size24,
                      padding: EdgeInsets.only(left: XfgSize().size26),
                      alignment: Alignment.centerLeft,
                      child: XfgText('您的积分不足', fontSize: XfgSize().text14, color: XfgColor.theme),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: XfgSize().size10, bottom: XfgSize().bottomBarHeight == 0 ? XfgSize().size10:XfgSize().bottomBarHeight),
                    alignment: Alignment.center,
                    color: XfgColor.white,
                    child: Builder(builder: (con) {
                      final insufficient = con.select<IntegralGoodsViewmodel, bool>((k) => k.insufficient);
                      return TextButton(
                        onPressed: insufficient ? null:integral.exchangeNow,
                        style: xfgButtonStyle(Size(XfgSize().size342, XfgSize().size50), radius: XfgSize().size50),
                        child: XfgText(insufficient ? '积分不足':'立即兑换', fontSize: XfgSize().text20, color: XfgColor.white, bold: FontWeight.w500),
                      );
                    }),
                  )
                ],
              ),
              Positioned(
                left: XfgSize().size15,
                top: XfgSize().statusBarHeight,
                child: GestureDetector(
                  onTap: XfgNav.pop,
                  child: Image.asset(Res.imagesIntegralGoodsBack, width: XfgSize().size28, height: XfgSize().size28),
                ),
              ),
            ],
          );
        }
    );
  }

  /// 通用布局1
  Widget _itemWidget1(String text, String subText, { bool bottom = false}) => Container(
    height: XfgSize().size44 + (bottom ? XfgSize().size0_5:0),
    padding: EdgeInsets.only(left: XfgSize().size12),
    decoration: bottom ? BoxDecoration(border: Border(bottom: BorderSide(width: XfgSize().size0_5, color: XfgColor.colorE))):null,
    child: Row(
      children: [
        XfgText(text, fontSize: XfgSize().text16, color: XfgColor.text1),
        SizedBox(width: XfgSize().size24),
        XfgText(subText, fontSize: XfgSize().text14, color: XfgColor.text2),
      ],
    ),
  );
}
